<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理后台系统</title>
  <script src="../js/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/common.js"></script>
    <style>
        .el-tabs__content{
            height: calc(100% - 40px);
        }
    </style>
</head>
<body>
<div id="app">
  <my-frame>
      <template v-slot:aside>
          <el-menu  @select="selectMenu" ref="menu">
              <el-menu-item v-for="t in menus" :index="t.name">
                    <i :class="t.icon"></i>
                    <span slot="title">{{t.title}}</span>
              </el-menu-item>
          </el-menu>
      </template>

      <el-tabs style="height: 100%;width: 100%" v-model="selectedTab" :closable="true" @tab-remove="removeTab" >
          <el-tab-pane style="height: 100%;width: 100%" v-for="t in tabs" :label="t.title" :name="t.name" >
              <div v-if="t.content.startsWith('<')" v-html="t.content" style="height: 100%"></div>
              <iframe v-else :src="t.content" style="height: 100%;width: 100%" ></iframe>
          </el-tab-pane>
      </el-tabs>
  </my-frame>
</div>


<script>
  var v = new Vue({
    el:"#app",
      data:{
        menus:[{
            title:'书籍管理',
            name:'1',
            content:'book.html',
            icon:'el-icon-reading'
        },
            {
                title: '读者查询',
                name: '2',
                content: 'user.html',
                icon: 'el-icon-user',
            }],
          tabs:[{
            title:'首页',
              name:'0',
              content:'<img style="height: 100%;width: 100%;object-fit: cover" src="https://gips1.baidu.com/it/u=942200867,4215273736&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f576_1024">'
          }],
          selectedTab:'0'
      },
      methods:{
        selectMenu(index,indexPath){
            this.selectedTab = index;
            //查找
            let tab = this.tabs.find(t=>t.name === index);
            if (tab){
                //如果已经存在，则选中
            }else {
                //如果不存在，则创建标签
                tab = this.menus.find(t=>t.name === index);
                this.tabs.push(tab);
                this.selectMenu(index);
            }

            //设置当前标签页
            this.selectedTab = index;
        },
          removeTab(tabName){
            if (tabName === '0'){
                return;
            }

            //找到要删除的标签页
              this.tabs = this.tabs.filter(t=>t.name !== tabName);
            this.selectedTab = '0';
          }
      },
      watch:{
        selectedTab(newValue,oldValue){
            if (newValue === 0){
                return;
            }

            this.$refs.menu.defaultActive = newValue;
        }
      }
  })
</script>
</body>
</html>